<template>
<div>
    <h1>这是子组件</h1>
    <div class="btn" :class="{'primary':type=='primary',
    'success':type=='success',
    'danger':type=='danger'}" @click="yige">
    {{text}}
    </div>
</div>

</template>

<script>
export default {
data(){
return {


}

},
props:{
    text:{
        type:String,
        required:true
    },
    type:{
        type:String
    }
},
methods:{
    yige(){
        this.$emit('click')
    }
}

}
</script>
<style lang='less' scoped>
.btn {
  width: 90%;
  height: 50px;
  background-color: #ccc;
  margin: 0 auto;
  border-radius: 25px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}
.primary {
  background-color: rgb(50, 104, 138);
  color: #fff;
}
.success {
  background-color: rgb(33, 184, 33);
  color: #fff;
}
.danger {
  background-color: rgb(201, 81, 33);
  color: #fff;
}
</style>
